<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <kim-vue ref="kim"
             @on-send="kimSendMessage"
             @on-group-member-click="onGroupMemberClick"
             @on-state-change="onStateChange"
             @on-chat-image-dblclick="onImageDblClick"
    ></kim-vue>

    <button @click="addFriend">添加好友到面板</button>
    <button @click="removeFriend">从面板移除好友</button>
    <button @click="getAnlan">获取安澜</button>
    <button @click="changeState(0)">安澜下线</button>
    <button @click="changeState(1)">安澜上线</button>
    <br><br>
    <button @click="customChat">自定义聊天窗口</button>
<!--

    <img v-for="(item,index) in $store.state.skinList" :key="index" :src="item">
-->

  </div>
</template>

<script>

let reply = [
  //'我的貂蝉，在哪里！',
  '[img:http://res.itsub.cn/img/0a4c37ae9a23730cca7e9404d3fbe742.jpg]',
  '[img:http://res.itsub.cn/img/0c086f37c4f4679841cc40dc8b31addf.jpg]',
  '[img:http://res.itsub.cn/img/1dca9134a57fff15277e2350c7e6fb9a.jpg]',
  '小鹿女什么的，一定是最不可爱的孩子吧',
  'file(MySQL从入门到删库跑路.mp4)[http://www.baidu.com]',
  '生活就像人家的魔法书，缝缝补补又是一年。',
  '再给你发两张[img:http://res.itsub.cn/img/mei/meinv-1.jpg][img:http://res.itsub.cn/img/mei/meinv-2.jpg]怎么样，还要吗',
]
/**
 * 随机整数，包含首
 * @param begin 从哪里开始
 * @param end 到哪里结束
 */
function randomInt(begin,end){
  return Math.floor(Math.random()*(end-begin+1))+begin;
}
function randomReply(){
  return reply[randomInt(0,reply.length-1)];
}


let kim = null;
export default {
  name: 'App',
  components: {

  },
  mounted(){
    kim = this.$refs.kim;
    kim.config({
      members: {
        url:'http://res.itsub.cn/json/kim.members.json',
      },
      uploadImageApi:{
        url:'http://localhost:8083/admin/upload/image',
        data:{
          type:'image',
        },
        headers:{
          'access-token':'multipart/form-data',
        },
      },
    })


    $.get('http://res.itsub.cn/json/kim.init.json',function(res){
      if (res.code == 0) {
        kim.init({
          mine:res.mine,
          friends:res.friends,
          groups:res.groups,
        });
      }
    });

    kim.config({
      states:['在线','隐身','忙碌']
    })

  },
  methods:{
    onImageDblClick(res){
      console.log('on-chat-image-dblclick',res);
    },
    // 在线状态改变事件
    onStateChange(state){
      console.log('on-state-change',state);
    },
    // 群成员点击事件
    onGroupMemberClick(member){
      console.log('on-group-member-click',member);
    },
    // 发送按钮被点击
    kimSendMessage(res){
      console.log('on-send',res);
      setTimeout(function (){
        let text = randomReply();
        kim.newMessage({
          type:res.to.type,   //聊天类型
          id:res.to.id,       //在和谁聊天
          fromid:res.to.id, //发送者id
          name:res.to.name, //发送者名字
          avatar:res.to.avatar, //发送者头像
          content:text,   //消息内容
          mine:false,      //是否自己，影响左右显示
          timestamp:new Date().getTime(), //发送时间
        })
      },1000)
    },
    addFriend() {
      kim.addContact({
        type:'friend',
        gid:2,    //好友分组
        id:1500,  //好友id
        name:'蔡文姬',//好友昵称
        avatar:'https://game.gtimg.cn/images/yxzj/img201606/heroimg/184/184.jpg',//好友头像
        sign:'飞舞战场的美少女,大活跃Q～～',
      })
    },
    removeFriend() {
      kim.removeFriend(1500);
    },
    //更改好友在线状态
    changeState(st) {
      kim.setFriendState(1003, st);
    },
    //获取1003号好友信息
    getAnlan() {
      console.log(kim.getFriend(1003))
      kim.on('sendMessage',function(res){
        let mine = res.mine;            //当前用户
        let to = res.to;                //接收者
        let content = res.content;      //发送内容
        //mine{ id,name,avatar }
        //to{ type,id,name,avatar }
      })
    },

    customChat() {
      kim.chat({
        name: '在线客服二' ,//名称
        type: 'kefu', //聊天类型
        avatar: 'https://game.gtimg.cn/images/yxzj/img201606/heroimg/152/152.jpg', //头像
        id: 16, //定义唯一的id方便你处理信息
      });
    },

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-align: center;*/
  color: #2c3e50;
  margin-top: 60px;
}
</style>
